<template>
    <div class="main-content">
        <levelbar></levelbar>
        <echartsLayout :formState='formState' :dataListState='dataListState' :eCharts1State='eCharts1State' :eCharts2State='eCharts2State' 
        :eCharts3State='eCharts3State' :chartsListState='chartsListState' :tableState='tableState'>
            <div slot="form">
                <el-form :model="formInline" ref="formInline" label-width="40px">
                    <el-row :gutter="41">
                        <el-col :span="7">
                           <el-form-item label="月份">
                                <el-date-picker v-model="formInline.month" :clearable='false' :editable="false" :picker-options="pickerOptions" type="month" placeholder="请选择月份" style="width:100%"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="2">
                            <div class="top-line">
                                <el-button type="primary" class="btn-common" @click="submit">查询</el-button>
                            </div>
                        </el-col>
                    </el-row> 
                </el-form>
            </div> 
            <div slot="eCharts1" v-loading="loading">
                <div class="charts-title">商品销售量</div>
                <div class="charts-display">
                   <trendChart width='100%' height='100%' id="trendChart2" :option='lineChartOption'></trendChart>
                </div>
            </div>
            <div slot="chartsList" >
                <el-row :gutter="20">
                    <el-col :span="12" class="data-item">
                        <div class="item">
                            <div class="charts-title">实物商品销售量TOP10</div>
                            <div class="charts-display">
                                <trendChart width='100%' height='100%' id="pieChart1" :option='pieChart1Option'></trendChart>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="12" class="data-item">
                        <div class="item">
                            <div class="charts-title">虚拟商品销售量TOP10</div>
                            <div class="charts-display">
                                <trendChart width='100%' height='100%' id="pieChart2" :option='pieChart2Option'></trendChart>
                            </div>
                        </div>
                    </el-col> 
                </el-row>
            </div>
        </echartsLayout>
    </div>
</template>

<script>
    import Levelbar from '../../layout/Levelbar';
    import echartsLayout from 'components/TableLayout/echartsLayout'; 
    import trendChart from 'components/Charts/trendChart';
    import moment from 'moment';
    import { getScoreInfo } from 'api/manageAnalysis';
    export default{
        components: {echartsLayout, Levelbar, trendChart},
        data() {
            return {
                loading: false,
                formState: false,
                dataListState: true,
                eCharts1State: false,
                eCharts2State: true,
                eCharts3State: true,
                chartsListState: false,
                tableState: true,
                formInline: {
                    month: new Date()
                },
                commoditySalesList: [],
                goodsSalestop10: [],
                virtualSalestop10: [],
                lineChartOption: null,
                pieChart1Option: null,
                pieChart2Option: null,
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                }
            }
        },
        created() {
            this.getScoreInfoData();
        },
        methods: {
            submit() {
                this.getScoreInfoData();
            },
            getScoreInfoData() {

                let dateYear = this.formInline.month?moment(new Date(this.formInline.month)).format('YYYY'):'';
                let dateMonth = this.formInline.month?Number(moment(new Date(this.formInline.month)).format('MM')):'';
                this.loading = true;
                getScoreInfo(dateYear, dateMonth).then(response => {
                    this.loading = false;
                    this.commoditySalesList = response.data.content.list;
                    this.goodsSalestop10 = response.data.content.productInfo;
                    this.virtualSalestop10 = response.data.content.virtualProductInfo;
                    this.getCommoditySales();
                    this.getgoodsSalesTop10();
                    this.getVirtualSalesTop10();
                }).catch(() => {
                    this.loading = false;
                });
            },

            // 商品销售量
            getCommoditySales() {
                let xAxisList = [];
                let goodsList = [];
                let virtualGoodsList = [];
                this.commoditySalesList.forEach(item => {
                    xAxisList.push(item.date);
                    goodsList.push(item.productCount);
                    virtualGoodsList.push(item.virtualProductCount);
                });

                this.lineChartOption = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['实物商品', '虚拟商品']
                    },
                    color: ['#E6B600', '#C12E34'],
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '10%',
                        containLabel: true
                    },
                    xAxis: {
                        axisLabel: {
                            rotate: 45,   
                            interval: 0
                        },
                        type: 'category',
                        boundaryGap: false,
                        data: xAxisList
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '实物商品',
                            type: 'line',
                            data: goodsList
                        },
                        {
                            name: '虚拟商品',
                            type: 'line',
                            data: virtualGoodsList
                        }
                    ]
                };
            },

            // 实物商品销售量top10
            getgoodsSalesTop10() {

                let legendList = [];
                let seriesList = [];
                this.goodsSalestop10.forEach(item => {
                    legendList.push(item.productName);
                    seriesList.push({
                        value: item.productCount, 
                        name: item.productName
                    });
                })
                this.pieChart1Option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: legendList
                    },
                    color: ['#2EC7C9', '#B6A2DE', '#5AB1EF', '#FFB980', '#D87A80', '#8D98B3', '#E5CF0D', '#97B552', '#95706D', '#DC69AA'],
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '55%',
                            center: ['60%', '55%'],
                            data: seriesList
                        }
                    ]
                };
            },

            // 虚拟商品销售量top10
            getVirtualSalesTop10() {
                let legendList = [];
                let seriesList = [];
                this.virtualSalestop10.forEach(item => {
                    legendList.push(item.productName);
                    seriesList.push({
                        value: item.productCount, 
                        name: item.productName
                    });
                });
                this.pieChart2Option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: legendList
                    },
                    color: ['#2EC7C9', '#B6A2DE', '#5AB1EF', '#FFB980', '#D87A80', '#8D98B3', '#E5CF0D', '#97B552', '#95706D', '#DC69AA'],
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '55%',
                            center: ['60%', '55%'],
                            data: seriesList
                        }
                    ]
                };
            }
        }
    }
</script>
<style lang="scss" scoped>
    .main-content {
        position: relative;
        padding: 20px 20px 10px;
        width: 1400px;
        margin: 0 auto;
    }
</style>                     